<template>
<!--注册页面组件-->
  <div class="mycontainer" style="width: 100%" :v-if="isView">
    <el-form :model="log" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!--用户名-->
      <el-form-item label="用户名" prop="email">
        <el-input  v-model="log.email"></el-input>
      </el-form-item>
<!--密码-->
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="log.password" autocomplete="off"></el-input>
      </el-form-item>
<!--确认密码-->
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="log.checkPass" autocomplete="off"></el-input>
      </el-form-item>
<!--昵称-->
      <el-form-item label="昵称" prop="user">
        <el-input v-model.number="log.user"></el-input>
      </el-form-item>
<!--性别-->
      <el-form-item label="性别" prop="user">
        <template>
          <el-radio v-model="log.gender" label="0">男</el-radio>
          <el-radio v-model="log.gender" label="1">女</el-radio>
        </template>
      </el-form-item>

<!--生日-->
      <el-form-item label="生日" prop="birthday">
        <el-date-picker type="date" placeholder="选择日期" v-model="log.birthday" style="width: 100%;"></el-date-picker>
      </el-form-item>
<!--地址-->
      <el-form-item label="地址" prop="Address">
        <el-row>
          <el-col span="8">
            <el-select class="arriveClass" v-model="log.region1" placeholder="请选择省份" @change="provinceChange($event)">
              <el-option v-for="(item,index) in provinceList" :key="item.name" :value="item.name"></el-option>
            </el-select>
          </el-col>

          <el-col span="8">
            <el-select class="arriveClass" v-model="log.region2" placeholder="请选择城市" @change="cityChange($event)">
              <el-option v-for="(item,index) in cityList" :key="index" :value="item.name"></el-option>
            </el-select>
          </el-col>

          <el-col span="8">
            <el-select class="arriveClass" v-model="log.region3" placeholders="请选择区县">
              <el-option v-for="(item,index) in countyList" :key="index" :value="item.name"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>

<!--按钮（注册 - 取消）-->
      <el-form-item>
        <a href="javascript:void(0)" @click="submitForm('ruleForm',log)" class="aLable">注册</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {sendRegister} from "@/api/api";
import {setSession, setToken} from "@/utils/Token";
import {getAddress} from "@/api/baidu";


export default {
  name: '',
  components: {},
  data() {
/*数据校验规则*/
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.log.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.log.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      /*视图控制*/
      isView:false,
      /*省份信息*/
      provinceList:[],
      cityList:[],
      countyList:[],
      CITY:[],
      XIAN:[],
      /*注册信息*/
      log: {
        user:'',
        password: '',
        checkPass: '',
        birthday: '',
        email:'',
        gender:'0',
        region1:'',
        region2:'',
        region3:'',
      },
      /*数据验证*/
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '日期不能为空'},
        ],
        email: [
          { required: true, message: '用户名不能为空'},
          { type: 'email', message: '用户名必须为邮箱', trigger: ['blur', 'change']}
        ],
        region1: [
          { required: true, message: '省份不能为空'},
        ],
        region2: [
          { required: true, message: '市不能为空'},
        ],
        region3: [
          { required: true, message: '区不能为空'},
        ],
      }
    }
  },
  methods: {
    /*根据选中省去匹配市*/
    provinceChange(that) {
      let cityCode = 0
      let newCityArry = []
      this.provinceList.forEach((item, index) => {
        if (item.name == that) {
          cityCode = item.code
        }
      })
      if (cityCode) {
        this.cityList = []
        this.CITY.forEach((item, index) => {
          if (item.code == cityCode) {
            this.cityList.push(item)
          }
        })  /* 市匹配成功*/
      }
    },

    /*根据选中市去匹配县，区*/
    cityChange(that) {
      let countyCode = 0
      let cityname = ''
      let newCountyArry = []
      this.cityList.forEach((item, index) => {
        if (item.name == that) {
          countyCode = item.id
          cityname = item.name
        }
      })
      if (countyCode) {
        this.countyList = []
        this.XIAN.forEach((item, index) => {
          if (item.code == countyCode && item.cityCountyName == cityname) {
            this.countyList.push(item)
          }
        })
      }
    },

    /*注册操作*/
    submitForm(formName, form) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          sendRegister(form).then((res) => {
            if (res.data.status === 200) {
              setToken('userId', res.data.data.id)
              setToken('userIcon', res.data.data.icon)
              setToken('userNickName', res.data.data.nickName)
              setToken('token', res.data.data.token)
              this.$message({message: res.data.msg, type: 'success'})
              this.$router.push('/main');
            }
          })
        } else {
          alert('注册失败');
          return false;
        }
      });
    },
  },
  /*创建时，获取省份信息*/
  created() {
    getAddress().then((res)=>{
      this.provinceList = res.data.districts[0].districts  /*省*/
      /* 进行遍历赋值*/
      /* 市区和县区*/
      let newProvince = this.provinceList
      for(let i = 0; i < newProvince.length; i++){              /* 省级*/
        for(let j = 0; j < newProvince[i].districts.length; j++){       /* 市级*/
          let city = newProvince[i].districts[j].name
          this.CITY.push({id:j+1,name:city,code:i+1})
          for(let k = 0;k<newProvince[i].districts[j].districts.length; k++){/* 县级*/
            let xian = newProvince[i].districts[j].districts[k].name
            this.XIAN.push({id:k+1,name:xian,code:j+1,cityCountyName:city})
          }
        }
      }
      for(let m = 0; m < newProvince.length;m++){
        newProvince[m] = {...newProvince[m],...{code:m+1}}
      }
      this.provinceList = newProvince;
      this.isView = true;
    })
  }
}
</script>
<style >

.demo-ruleForm{
  width: 100%;
  /*border:1px solid  transparent;*/
  border-radius: 15px;
  padding-right: 30px;
  /* 为其整体设置接近透明的效果*/
  background:transparent;
  /* 设置box-shadow使其有立体感 */
  /*box-shadow: 5px 5px 0 0  rgba(0,0,0,0.2);*/
  position: relative;
  left: -15px;
}

/*设置a标签样式*/
.aLable {
  position: relative;
  /*display: inline-block;*/
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  /*去下划线*/
  text-decoration: none;
  /*text-transform: uppercase;*/
  /*overflow: hidden;*/
  /*点击按钮时的延时效果*/
  transition:0.5s;
  margin-top: 40px;
  /*letter-spacing: 4px*/
}

/*设置选择时样式*/
.aLable:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  /*设置按钮的阴影*/
  box-shadow: 0 0 5px #03e9f4,
  0 0 25px #03e9f4,
  0 0 50px #03e9f4,
  0 0 100px #03e9f4;
}

/*设置表单中的input标签样式*/
.mycontainer .el-input__inner{
  /* 使input框的背景变透明 */
  background-color: transparent !important;
  /* 使边框也变透明 */
  border-color: transparent !important;
  /* 给边框加阴影能够使其有立体感 */
  /*box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2) !important;*/
  /* 改变获取焦点后的竖线颜色 */
  /*caret-color: rgba(0, 255, 255,0.8) !important;*/
  border: none !important;
  border-bottom: 1px solid #fff !important;
  /*点击时的边框透明*/
  outline: none !important;
  color:#FFFFFF !important;
}


/*设置表单中的标签样式*/
.mycontainer .el-form-item__label{
  /* 给el-form组件的label标签颜色修改 */
  font-size: 20px !important;
  font-family: 幼圆;
  color: #FFFFFF!important;
}

.mycontainer .el-radio__label{
  color: white;
  font-family: 幼圆;
  font-size: 23px;
}







</style>
<style>

</style>

